import { describe, expect, it, beforeEach, afterEach } from "bun:test"
import { createTestRenderer, type TestRenderer, type MockInput } from "../../testing/test-renderer"
import { createTextareaRenderable } from "./renderable-test-utils"
import { RGBA } from "../../lib/RGBA"
import { SyntaxStyle } from "../../syntax-style"
import { OptimizedBuffer } from "../../buffer"
import { fg, t } from "../../lib"
import { BoxRenderable, TextareaRenderable, TextRenderable } from ".."

let currentRenderer: TestRenderer
let renderOnce: () => Promise<void>
let currentMockInput: MockInput
let captureFrame: () => string
let resize: (width: number, height: number) => void

describe("Textarea - Rendering Tests", () => {
  beforeEach(async () => {
    ;({
      renderer: currentRenderer,
      renderOnce,
      captureCharFrame: captureFrame,
      mockInput: currentMockInput,
      resize,
    } = await createTestRenderer({
      width: 80,
      height: 24,
    }))
  })

  afterEach(() => {
    currentRenderer.destroy()
  })

  describe("Wrapping", () => {
    it("should move cursor down through all wrapped visual lines at column 0", async () => {
      // Create a long line that will wrap into multiple visual lines
      const longText =
        "This is a very long line that will definitely wrap into multiple visual lines when the viewport is small"
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: longText,
        width: 20, // Small viewport to force wrapping
        height: 10,
        wrapMode: "word",
      })

      editor.focus()

      // Set cursor at the beginning (0, 0) - logical position
      editor.editBuffer.setCursor(0, 0)
      await renderOnce()

      // Get initial visual cursor position - should be at visual 0, 0
      let visualCursor = editor.editorView.getVisualCursor()
      expect(visualCursor.visualRow).toBe(0)
      expect(visualCursor.visualCol).toBe(0)

      // Verify we have multiple wrapped lines (should be 7 for this text)
      const vlineCount = editor.editorView.getVirtualLineCount()
      expect(vlineCount).toBeGreaterThan(1)

      // Move down through each wrapped line - cursor should stay at column 0
      for (let i = 1; i < vlineCount; i++) {
        currentMockInput.pressArrow("down")
        await renderOnce()

        visualCursor = editor.editorView.getVisualCursor()

        // Cursor should have moved down to the next visual line
        expect(visualCursor.visualRow).toBe(i)

        // Cursor should be at column 0 (beginning of each wrapped line)
        expect(visualCursor.visualCol).toBe(0)
      }

      // After moving through all wrapped lines, we should be at the last wrapped line
      expect(visualCursor.visualRow).toBe(vlineCount - 1)
      expect(visualCursor.visualCol).toBe(0)
    })

    it("should move cursor up through all wrapped visual lines at column 0", async () => {
      // Create a long line that will wrap into multiple visual lines
      const longText =
        "This is a very long line that will definitely wrap into multiple visual lines when the viewport is small"
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: longText,
        width: 20, // Small viewport to force wrapping
        height: 10,
        wrapMode: "word",
      })

      editor.focus()

      // Verify we have multiple wrapped lines
      const vlineCount = editor.editorView.getVirtualLineCount()
      expect(vlineCount).toBeGreaterThan(1)

      // Start at the END of the line (which will be on the last wrapped visual line)
      const eol = editor.editBuffer.getEOL()
      editor.editBuffer.setCursor(eol.row, eol.col)
      await renderOnce()

      // Move to the beginning of the last wrapped line (column 0 of last visual line)
      let visualCursor = editor.editorView.getVisualCursor()
      const lastVisualRow = visualCursor.visualRow

      // Set cursor to column 0 of the last wrapped visual line by finding its logical column
      // Last visual line starts at a specific logical column - we need to find it
      const lastVlineStartCol = editor.logicalCursor.col - visualCursor.visualCol
      editor.editBuffer.setCursor(0, lastVlineStartCol)
      await renderOnce()

      visualCursor = editor.editorView.getVisualCursor()
      expect(visualCursor.visualRow).toBe(lastVisualRow)
      expect(visualCursor.visualCol).toBe(0)

      // Now move UP through each wrapped line - cursor should stay at column 0
      for (let i = lastVisualRow - 1; i >= 0; i--) {
        currentMockInput.pressArrow("up")
        await renderOnce()

        visualCursor = editor.editorView.getVisualCursor()

        // Cursor should have moved up to the previous visual line
        expect(visualCursor.visualRow).toBe(i)

        // Cursor should be at column 0 (beginning of each wrapped line)
        expect(visualCursor.visualCol).toBe(0)
      }

      // After moving through all wrapped lines, we should be at the first wrapped line
      expect(visualCursor.visualRow).toBe(0)
      expect(visualCursor.visualCol).toBe(0)
    })

    it("should handle wrap mode property", async () => {
      const longText = "A".repeat(100)
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: longText,
        width: 20,
        height: 10,
        wrapMode: "word",
      })

      expect(editor.wrapMode).toBe("word")
      const wrappedCount = editor.editorView.getVirtualLineCount()
      expect(wrappedCount).toBeGreaterThan(1)

      editor.wrapMode = "none"
      expect(editor.wrapMode).toBe("none")
      const unwrappedCount = editor.editorView.getVirtualLineCount()
      expect(unwrappedCount).toBe(1)
    })

    it("should handle wrapMode changes", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello wonderful world",
        width: 12,
        height: 10,
        wrapMode: "char",
      })

      expect(editor.wrapMode).toBe("char")

      editor.wrapMode = "word"
      expect(editor.wrapMode).toBe("word")
    })

    it("should render with tab indicator correctly", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 1\tTabbed\nLine 2\t\tDouble tab",
        tabIndicator: "→",
        tabIndicatorColor: RGBA.fromValues(0.5, 0.5, 0.5, 1),
        width: 40,
        height: 10,
      })

      await renderOnce()
      const frame = captureFrame()
      expect(frame).toMatchSnapshot()
    })
  })

  describe("Height and Width Measurement", () => {
    it("should grow height for multiline text without wrapping", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 1\nLine 2\nLine 3\nLine 4\nLine 5",
        wrapMode: "none",
        width: 40,
      })

      await renderOnce()

      expect(editor.height).toBe(5)
      expect(editor.width).toBeGreaterThanOrEqual(6)
    })

    it("should grow height for wrapped text when wrapping enabled", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "This is a very long line that will definitely wrap to multiple lines",
        wrapMode: "word",
        width: 15,
      })

      await renderOnce()

      expect(editor.height).toBeGreaterThan(1)
      expect(editor.width).toBeLessThanOrEqual(15)
    })

    it("should measure full width when wrapping is disabled and not constrained by parent", async () => {
      const longLine = "This is a very long line that would wrap but wrapping is disabled"
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: longLine,
        wrapMode: "none",
        position: "absolute",
      })

      await renderOnce()

      expect(editor.height).toBe(1)
      expect(editor.width).toBe(longLine.length)
    })

    it("should shrink height when deleting lines via value setter", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 1\nLine 2\nLine 3\nLine 4\nLine 5",
        width: 40,
        wrapMode: "none",
      })

      editor.focus()
      await renderOnce()
      expect(editor.height).toBe(5)

      // Remove lines by setting new value
      editor.setText("Line 1\nLine 2")
      await renderOnce()

      expect(editor.height).toBe(2)
      expect(editor.plainText).toBe("Line 1\nLine 2")
    })

    it("should update height when content changes from single to multiline", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Single line",
        wrapMode: "none",
      })

      await renderOnce()
      expect(editor.height).toBe(1)

      editor.setText("Line 1\nLine 2\nLine 3")
      await renderOnce()

      expect(editor.height).toBe(3)
    })

    it("should grow height when pressing Enter to add newlines", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Single line",
        width: 40,
        wrapMode: "none",
      })

      // Add a second textarea below to verify layout reflow
      const { textarea: belowEditor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Below",
        width: 40,
      })

      await renderOnce()
      expect(editor.height).toBe(1)
      const initialHeight = editor.height
      const initialBelowY = belowEditor.y

      editor.focus()
      editor.gotoLine(9999) // Move to end

      // Press Enter 3 times to add 3 newlines
      currentMockInput.pressEnter()
      expect(editor.plainText).toBe("Single line\n")
      await renderOnce() // Wait for layout recalculation

      currentMockInput.pressEnter()
      expect(editor.plainText).toBe("Single line\n\n")
      await renderOnce() // Wait for layout recalculation

      currentMockInput.pressEnter()
      expect(editor.plainText).toBe("Single line\n\n\n")
      await renderOnce() // Wait for layout recalculation

      // The editor should have grown
      expect(editor.height).toBeGreaterThan(initialHeight)
      expect(editor.height).toBe(4) // 1 original line + 3 new lines
      expect(editor.plainText).toBe("Single line\n\n\n")

      // The element below should have moved down
      expect(belowEditor.y).toBeGreaterThan(initialBelowY)
      expect(belowEditor.y).toBe(4) // After the 4-line editor
    })
  })

  describe("Unicode Support", () => {
    it("should handle emoji insertion", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello",
        width: 40,
        height: 10,
      })

      editor.focus()
      editor.gotoLine(9999) // Move to end
      editor.insertText(" 🌟")

      expect(editor.plainText).toBe("Hello 🌟")
    })

    it("should handle CJK characters", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello",
        width: 40,
        height: 10,
      })

      editor.focus()
      editor.gotoLine(9999) // Move to end
      editor.insertText(" 世界")

      expect(editor.plainText).toBe("Hello 世界")
    })

    it("should handle emoji cursor movement", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "A🌟B",
        width: 40,
        height: 10,
      })

      editor.focus()
      expect(editor.logicalCursor.col).toBe(0)

      currentMockInput.pressArrow("right") // Move past A
      expect(editor.logicalCursor.col).toBe(1)

      currentMockInput.pressArrow("right") // Move past emoji (2 cells)
      expect(editor.logicalCursor.col).toBe(3)

      currentMockInput.pressArrow("right") // Move past B
      expect(editor.logicalCursor.col).toBe(4)
    })
  })

  describe("Content Property", () => {
    it("should update content programmatically", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Initial",
        width: 40,
        height: 10,
      })

      editor.setText("Updated")
      expect(editor.plainText).toBe("Updated")
      expect(editor.plainText).toBe("Updated")
    })

    it("should reset cursor when content changes", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello World",
        width: 40,
        height: 10,
      })

      editor.gotoLine(9999) // Move to end
      expect(editor.logicalCursor.col).toBe(11)

      editor.setText("New")
      // Cursor should reset to start
      expect(editor.logicalCursor.row).toBe(0)
      expect(editor.logicalCursor.col).toBe(0)
    })

    it("should clear text with clear() method", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello World",
        width: 40,
        height: 10,
      })

      expect(editor.plainText).toBe("Hello World")

      editor.clear()
      expect(editor.plainText).toBe("")
    })

    it("should clear highlights with clear() method", async () => {
      const style = SyntaxStyle.create()
      const styleId = style.registerStyle("highlight", {
        fg: RGBA.fromValues(1, 0, 0, 1),
      })

      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello World",
        width: 40,
        height: 10,
        syntaxStyle: style,
      })

      editor.addHighlightByCharRange({
        start: 0,
        end: 5,
        styleId: styleId,
        priority: 0,
      })

      const highlightsBefore = editor.getLineHighlights(0)
      expect(highlightsBefore.length).toBeGreaterThan(0)

      editor.clear()

      expect(editor.plainText).toBe("")
      const highlightsAfter = editor.getLineHighlights(0)
      expect(highlightsAfter.length).toBe(0)
    })

    it("should clear both text and highlights together", async () => {
      const style = SyntaxStyle.create()
      const styleId = style.registerStyle("highlight", {
        fg: RGBA.fromValues(1, 0, 0, 1),
      })

      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 1\nLine 2\nLine 3",
        width: 40,
        height: 10,
        syntaxStyle: style,
      })

      editor.addHighlight(0, { start: 0, end: 6, styleId: styleId, priority: 0 })
      editor.addHighlight(1, { start: 0, end: 6, styleId: styleId, priority: 0 })

      expect(editor.plainText).toBe("Line 1\nLine 2\nLine 3")
      expect(editor.getLineHighlights(0).length).toBe(1)
      expect(editor.getLineHighlights(1).length).toBe(1)

      editor.clear()

      expect(editor.plainText).toBe("")
      expect(editor.getLineHighlights(0).length).toBe(0)
      expect(editor.getLineHighlights(1).length).toBe(0)
    })

    it("should allow typing after clear()", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello World",
        width: 40,
        height: 10,
      })

      editor.focus()
      expect(editor.plainText).toBe("Hello World")

      currentMockInput.pressKey("!")
      expect(editor.plainText).toBe("!Hello World")

      editor.clear()
      expect(editor.plainText).toBe("")

      currentMockInput.pressKey("N")
      currentMockInput.pressKey("e")
      currentMockInput.pressKey("w")
      expect(editor.plainText).toBe("New")

      currentMockInput.pressKey(" ")
      currentMockInput.pressKey("T")
      currentMockInput.pressKey("e")
      currentMockInput.pressKey("x")
      currentMockInput.pressKey("t")
      expect(editor.plainText).toBe("New Text")
    })
  })

  describe("Rendering After Edits", () => {
    it("should render correctly after insert text", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Test",
        width: 40,
        height: 10,
      })

      editor.focus()
      editor.insertText("x")

      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
      buffer.drawEditorView(editor.editorView, 0, 0)

      expect(editor.plainText).toBe("xTest")
      expect(editor.logicalCursor.col).toBe(1)

      buffer.destroy()
    })

    it("should render correctly after rapid edits", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
      })

      editor.focus()

      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")

      for (let i = 0; i < 5; i++) {
        editor.insertText("a")
        buffer.drawEditorView(editor.editorView, 0, 0)
      }

      expect(editor.plainText).toBe("aaaaa")
      expect(editor.logicalCursor.col).toBe(5)

      buffer.destroy()
    })

    it("should render correctly after newline", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello",
        width: 40,
        height: 10,
      })

      editor.focus()
      editor.gotoLine(9999)

      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")

      editor.newLine()
      buffer.drawEditorView(editor.editorView, 0, 0)

      expect(editor.plainText).toBe("Hello\n")
      expect(editor.logicalCursor.row).toBe(1)
      expect(editor.logicalCursor.col).toBe(0)

      buffer.destroy()
    })

    it("should render correctly after backspace", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello",
        width: 40,
        height: 10,
      })

      editor.focus()
      editor.gotoLine(9999)

      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")

      editor.deleteCharBackward()
      buffer.drawEditorView(editor.editorView, 0, 0)

      expect(editor.plainText).toBe("Hell")
      expect(editor.logicalCursor.col).toBe(4)

      buffer.destroy()
    })

    it("should render correctly with draw-edit-draw pattern", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Test",
        width: 40,
        height: 10,
      })

      editor.focus()

      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")

      buffer.drawEditorView(editor.editorView, 0, 0)
      editor.insertText("x")
      buffer.drawEditorView(editor.editorView, 0, 0)

      expect(editor.plainText).toBe("xTest")
      expect(editor.logicalCursor.col).toBe(1)

      buffer.destroy()
    })

    it("should render correctly after multiple text buffer modifications", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line1\nLine2\nLine3",
        width: 40,
        height: 10,
      })

      editor.focus()

      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")

      buffer.drawEditorView(editor.editorView, 0, 0)

      editor.insertText("X")
      buffer.drawEditorView(editor.editorView, 0, 0)
      expect(editor.plainText).toBe("XLine1\nLine2\nLine3")

      editor.newLine()
      buffer.drawEditorView(editor.editorView, 0, 0)
      expect(editor.plainText).toBe("X\nLine1\nLine2\nLine3")

      editor.deleteCharBackward()
      buffer.drawEditorView(editor.editorView, 0, 0)
      expect(editor.plainText).toBe("XLine1\nLine2\nLine3")

      buffer.destroy()
    })
  })

  describe("Viewport Scrolling", () => {
    it("should scroll viewport down when cursor moves below visible area", async () => {
      // Create editor with small viewport
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 0\nLine 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9",
        width: 40,
        height: 5, // Only 5 lines visible
      })

      editor.focus()

      // Initial viewport should show lines 0-4
      let viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBe(0)
      expect(viewport.height).toBe(5)

      // Move cursor to line 7 (beyond viewport)
      editor.gotoLine(7)

      // Viewport should have scrolled to keep cursor visible
      viewport = editor.editorView.getViewport()
      // With scroll margin of 0.2 (20% = 1 line), viewport should scroll to show line 7
      // Expected: offsetY should be at least 3 (to show lines 3-7)
      expect(viewport.offsetY).toBeGreaterThanOrEqual(3)
    })

    it("should scroll viewport up when cursor moves above visible area", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 0\nLine 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9",
        width: 40,
        height: 5,
      })

      editor.focus()

      // Start at line 8
      editor.gotoLine(8)

      let viewport = editor.editorView.getViewport()
      // Viewport should have automatically scrolled to show line 8
      expect(viewport.offsetY).toBeGreaterThan(0)

      // Now move to line 1 (above viewport)
      editor.gotoLine(1)

      viewport = editor.editorView.getViewport()
      // Viewport should have scrolled up to show line 1
      expect(viewport.offsetY).toBeLessThanOrEqual(1)
    })

    it("should scroll viewport when using arrow keys to move beyond visible area", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i}`).join("\n"),
        width: 40,
        height: 5,
      })

      editor.focus()

      let viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBe(0)

      // Press down arrow 6 times to move beyond initial viewport
      for (let i = 0; i < 6; i++) {
        currentMockInput.pressArrow("down")
      }

      viewport = editor.editorView.getViewport()
      // Should have scrolled
      expect(viewport.offsetY).toBeGreaterThan(0)
    })

    it("should maintain scroll margin when moving cursor", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i}`).join("\n"),
        width: 40,
        height: 10,
        scrollMargin: 0.2, // 20% = 2 lines margin
      })

      editor.focus()

      // Move to line 8 (near bottom of initial viewport)
      editor.gotoLine(8)

      let viewport = editor.editorView.getViewport()

      // With 2-line margin, cursor at line 8 should trigger scroll
      // so that line 8 is at most at position 8 in viewport
      expect(viewport.offsetY).toBeGreaterThanOrEqual(0)
    })

    it("should handle viewport scrolling with text wrapping", async () => {
      const longLine = "word ".repeat(50) // Creates line that will wrap
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: Array.from({ length: 10 }, (_, i) => (i === 5 ? longLine : `Line ${i}`)).join("\n"),
        width: 20,
        height: 5,
        wrapMode: "word",
      })

      editor.focus()

      // Move to the long line
      editor.gotoLine(5)

      const vlineCount = editor.editorView.getTotalVirtualLineCount()
      expect(vlineCount).toBeGreaterThan(10) // Should be more due to wrapping

      // Move to end of long line
      const cursor = editor.logicalCursor
      editor.editBuffer.setCursorToLineCol(cursor.row, 9999) // Move to end of line

      let viewport = editor.editorView.getViewport()

      // Viewport should have scrolled to show cursor
      // This is complex with wrapping - we need virtual line scrolling
    })

    it("should verify viewport follows cursor to line 10", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i}`).join("\n"),
        width: 40,
        height: 8,
      })

      editor.focus()

      // Move to line 10
      editor.gotoLine(10)

      const viewport = editor.editorView.getViewport()

      // Viewport should have scrolled to show line 10
      // With height=8 and scroll margin, line 10 should be visible
      expect(viewport.offsetY).toBeGreaterThan(0)
      expect(viewport.offsetY).toBeLessThanOrEqual(10)

      // Line 10 should be within the viewport range
      const viewportEnd = viewport.offsetY + viewport.height
      expect(10).toBeGreaterThanOrEqual(viewport.offsetY)
      expect(10).toBeLessThan(viewportEnd)
    })

    it("should track viewport offset as cursor moves through document", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: Array.from({ length: 15 }, (_, i) => `Line ${i}`).join("\n"),
        width: 30,
        height: 5,
      })

      editor.focus()

      const viewportOffsets: number[] = []

      // Track viewport offset at different cursor positions
      for (const line of [0, 2, 4, 6, 8, 10, 12]) {
        editor.gotoLine(line)
        const viewport = editor.editorView.getViewport()
        viewportOffsets.push(viewport.offsetY)
      }

      // Viewport should generally increase as cursor moves down
      // (with possible plateaus when cursor is already visible)
      const lastOffset = viewportOffsets[viewportOffsets.length - 1]
      const firstOffset = viewportOffsets[0]
      expect(lastOffset).toBeGreaterThan(firstOffset)

      // At line 0, viewport should be at 0
      expect(viewportOffsets[0]).toBe(0)

      // At line 12, viewport should have scrolled
      expect(viewportOffsets[viewportOffsets.length - 1]).toBeGreaterThan(5)
    })

    it("should scroll viewport when cursor moves with Page Up/Page Down", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: Array.from({ length: 30 }, (_, i) => `Line ${i}`).join("\n"),
        width: 40,
        height: 10,
      })

      editor.focus()

      let viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBe(0)

      // Move down 15 lines (more than viewport height)
      for (let i = 0; i < 15; i++) {
        editor.moveCursorDown()
      }

      viewport = editor.editorView.getViewport()

      // Should have scrolled
      expect(viewport.offsetY).toBeGreaterThan(0)
      expect(editor.logicalCursor.row).toBe(15)
    })

    it("should scroll viewport down when pressing Enter repeatedly", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Start",
        width: 40,
        height: 5,
      })

      editor.focus()
      editor.gotoLine(9999) // Move to end

      let viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBe(0)
      expect(editor.logicalCursor.row).toBe(0)

      // Press Enter 8 times to create 8 new lines
      for (let i = 0; i < 8; i++) {
        currentMockInput.pressEnter()
      }

      // After 8 Enters, we should have 9 lines total (0-8)
      expect(editor.logicalCursor.row).toBe(8)

      // Viewport should have scrolled to keep cursor visible
      viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBeGreaterThan(0)

      // Cursor should be visible in viewport
      const cursorLine = editor.logicalCursor.row
      expect(cursorLine).toBeGreaterThanOrEqual(viewport.offsetY)
      expect(cursorLine).toBeLessThan(viewport.offsetY + viewport.height)
    })

    it("should scroll viewport up when pressing Backspace to delete characters and move up", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: Array.from({ length: 15 }, (_, i) => `Line ${i}`).join("\n"),
        width: 40,
        height: 5,
      })

      editor.focus()

      // Start at line 10, move to end so we have characters to delete
      editor.gotoLine(10)
      let cursor = editor.logicalCursor
      editor.editBuffer.setCursorToLineCol(cursor.row, 9999) // Move to end of line

      let viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBeGreaterThan(0)
      const initialOffset = viewport.offsetY

      // Delete all text and move cursor up to line 0
      // Press Ctrl+A to go to start, then move to line 2, then backspace repeatedly
      editor.gotoLine(0) // Move to start
      editor.gotoLine(2)
      cursor = editor.logicalCursor
      editor.editBuffer.setCursorToLineCol(cursor.row, 9999) // Move to end of line

      // Now we're at line 2, and viewport should have scrolled up
      viewport = editor.editorView.getViewport()

      // Viewport should have scrolled up from initial position
      expect(viewport.offsetY).toBeLessThan(initialOffset)
      expect(editor.logicalCursor.row).toBe(2)
    })

    it("should scroll viewport when typing at end creates wrapped lines beyond viewport", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Start",
        width: 20,
        height: 5,
        wrapMode: "word",
      })

      editor.focus()
      editor.gotoLine(9999) // Move to end

      let viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBe(0)

      // Type enough to create multiple wrapped lines
      const longText = " word".repeat(50)
      for (const char of longText) {
        currentMockInput.pressKey(char)
      }

      viewport = editor.editorView.getViewport()
      const vlineCount = editor.editorView.getTotalVirtualLineCount()

      // Should have created multiple virtual lines
      expect(vlineCount).toBeGreaterThan(5)

      // Viewport should have scrolled to keep cursor visible
      // (This test may fail if virtual line scrolling isn't implemented yet)
      expect(viewport.offsetY).toBeGreaterThanOrEqual(0)
    })

    it("should scroll viewport when using Enter to add lines, then Backspace to remove them", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 0\nLine 1\nLine 2",
        width: 40,
        height: 5,
      })

      editor.focus()
      editor.gotoLine(9999) // Move to end

      let viewport = editor.editorView.getViewport()
      const initialOffset = viewport.offsetY

      // Add 6 new lines
      for (let i = 0; i < 6; i++) {
        currentMockInput.pressEnter()
        currentMockInput.pressKey("X")
      }

      // Should have scrolled down
      viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBeGreaterThan(initialOffset)
      const maxOffset = viewport.offsetY

      // Now delete those lines by backspacing
      for (let i = 0; i < 12; i++) {
        // 12 backspaces to delete 6 "X\n" pairs
        currentMockInput.pressBackspace()
      }

      // Should have scrolled back up
      viewport = editor.editorView.getViewport()
      expect(viewport.offsetY).toBeLessThan(maxOffset)
    })

    it("should show last line at bottom of viewport with no gap", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: Array.from({ length: 10 }, (_, i) => `Line ${i}`).join("\n"),
        width: 40,
        height: 5,
      })

      editor.focus()

      // Move to last line (line 9)
      editor.gotoLine(9)

      let viewport = editor.editorView.getViewport()

      // With 10 lines (0-9) and viewport height 5, max offset is 10 - 5 = 5
      // Viewport should be at offset 5, showing lines 5-9 with line 9 at the bottom
      expect(viewport.offsetY).toBe(5)

      // Verify cursor line is visible
      expect(9).toBeGreaterThanOrEqual(viewport.offsetY)
      expect(9).toBeLessThan(viewport.offsetY + viewport.height)

      // No gap - last visible line should be the last line of content
      const lastVisibleLine = viewport.offsetY + viewport.height - 1
      expect(lastVisibleLine).toBe(9)
    })

    it("should not scroll past end when document is smaller than viewport", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 0\nLine 1\nLine 2",
        width: 40,
        height: 10, // Viewport bigger than content
      })

      editor.focus()

      // Move to last line
      editor.gotoLine(2)

      let viewport = editor.editorView.getViewport()

      // Should NOT scroll at all - content fits in viewport
      expect(viewport.offsetY).toBe(0)
    })
  })

  describe("Placeholder Support", () => {
    it("should display placeholder when empty", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Enter text here...",
      })

      // plainText should return empty (placeholder is display-only)
      expect(editor.plainText).toBe("")
      expect(editor.placeholder).toBe("Enter text here...")
    })

    it("should hide placeholder when text is inserted", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Type something...",
      })

      editor.focus()
      expect(editor.plainText).toBe("")

      currentMockInput.pressKey("H")
      currentMockInput.pressKey("i")

      expect(editor.plainText).toBe("Hi")
    })

    it("should reactivate placeholder when all text is deleted", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Test",
        width: 40,
        height: 10,
        placeholder: "Empty buffer...",
      })

      editor.focus()
      expect(editor.plainText).toBe("Test")

      // Move to end, then delete all text
      editor.gotoLine(9999)
      for (let i = 0; i < 4; i++) {
        currentMockInput.pressBackspace()
      }

      expect(editor.plainText).toBe("")
    })

    it("should update placeholder text dynamically", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "First placeholder",
      })

      expect(editor.placeholder).toBe("First placeholder")
      expect(editor.plainText).toBe("")

      editor.placeholder = "Second placeholder"
      expect(editor.placeholder).toBe("Second placeholder")
      expect(editor.plainText).toBe("")
    })

    it("should update placeholder with styled text dynamically", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Colored placeholder",
      })

      expect(editor.plainText).toBe("")

      // Update placeholder with styled text
      editor.placeholder = t`${fg("#FF0000")("Red placeholder")}`
      expect(editor.plainText).toBe("")
    })

    it("should work with value property setter", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Empty state",
      })

      expect(editor.plainText).toBe("")

      editor.setText("New content")
      expect(editor.plainText).toBe("New content")

      editor.setText("")
      expect(editor.plainText).toBe("")
    })

    it("should handle placeholder with focus changes", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Click to edit",
      })

      // Placeholder should show regardless of focus
      expect(editor.plainText).toBe("")

      editor.focus()
      expect(editor.plainText).toBe("")

      editor.blur()
      expect(editor.plainText).toBe("")
    })

    it("should handle typing after placeholder is shown", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Start typing...",
      })

      editor.focus()
      expect(editor.plainText).toBe("")

      currentMockInput.pressKey("H")
      currentMockInput.pressKey("e")
      currentMockInput.pressKey("l")
      currentMockInput.pressKey("l")
      currentMockInput.pressKey("o")

      expect(editor.plainText).toBe("Hello")
    })

    it("should show placeholder after deleting all typed text", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Type here",
      })

      editor.focus()

      // Type "Test"
      currentMockInput.pressKey("T")
      currentMockInput.pressKey("e")
      currentMockInput.pressKey("s")
      currentMockInput.pressKey("t")
      expect(editor.plainText).toBe("Test")

      // Backspace all
      for (let i = 0; i < 4; i++) {
        currentMockInput.pressBackspace()
      }

      expect(editor.plainText).toBe("")
    })

    it("should handle placeholder with newlines", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Line 1\nLine 2",
      })

      expect(editor.plainText).toBe("")

      editor.insertText("Content")
      expect(editor.plainText).toBe("Content")
    })

    it("should handle null placeholder (no placeholder)", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: null,
      })

      expect(editor.placeholder).toBe(null)
      expect(editor.plainText).toBe("")

      editor.insertText("Content")
      expect(editor.plainText).toBe("Content")
    })

    it("should clear placeholder when set to null", async () => {
      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "",
        width: 40,
        height: 10,
        placeholder: "Initial placeholder",
      })

      expect(editor.placeholder).toBe("Initial placeholder")
      expect(editor.plainText).toBe("")

      editor.placeholder = null
      expect(editor.placeholder).toBe(null)
      expect(editor.plainText).toBe("")
    })
  })

  describe("Textarea Content Snapshots", () => {
    it("should render basic text content correctly", async () => {
      await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello World",
        left: 5,
        top: 3,
        width: 20,
        height: 5,
      })

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()
    })

    it("should render multiline text content correctly", async () => {
      await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line 1: Hello\nLine 2: World\nLine 3: Testing\nLine 4: Multiline",
        left: 1,
        top: 1,
        width: 30,
        height: 10,
      })

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()
    })

    it("should render text with character wrapping correctly", async () => {
      await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "This is a very long text that should wrap to multiple lines when wrap is enabled",
        wrapMode: "char",
        width: 15,
        left: 0,
        top: 0,
      })

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()
    })

    it("should render text with word wrapping and punctuation", async () => {
      await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Hello,World.Test-Example/Path with various punctuation marks!",
        wrapMode: "word",
        width: 12,
        left: 0,
        top: 0,
      })

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()
    })

    it("should render placeholder when creating textarea with placeholder directly", async () => {
      await createTextareaRenderable(currentRenderer, renderOnce, {
        placeholder: "Enter text here...",
        left: 1,
        top: 1,
        width: 30,
        height: 5,
      })

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()
    })

    it("should render placeholder when set programmatically after creation", async () => {
      const { textarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
        left: 1,
        top: 1,
        width: 30,
        height: 5,
      })

      textarea.placeholder = "Type something..."
      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()
    })

    it("should resize correctly when typing return as first input with placeholder", async () => {
      resize(40, 10)

      const container = new BoxRenderable(currentRenderer, {
        border: true,
        left: 1,
        top: 1,
      })
      currentRenderer.root.add(container)

      const textarea = new TextareaRenderable(currentRenderer, {
        placeholder: "Enter your message...",
        width: 30,
        minHeight: 1,
        maxHeight: 3,
      })
      container.add(textarea)

      textarea.focus()
      await renderOnce()

      const frameBeforeEnter = captureFrame()
      expect(textarea.height).toBe(1)

      currentMockInput.pressEnter()
      await renderOnce()
      await renderOnce()

      const frameAfterEnter = captureFrame()
      expect(frameAfterEnter).toMatchSnapshot()
      expect(textarea.height).toBe(2)
      expect(textarea.plainText).toBe("\n")
    })
  })

  describe("Layout Reflow on Size Change", () => {
    it("should reflow subsequent elements when textarea grows and shrinks", async () => {
      const { textarea: firstEditor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Short",
        width: 20,
        wrapMode: "word",
      })

      const { textarea: secondEditor } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "I am below the first textarea",
        width: 30,
      })

      await renderOnce()

      // Initially, first editor is 1 line high
      expect(firstEditor.height).toBe(1)
      const initialSecondY = secondEditor.y
      expect(initialSecondY).toBe(1) // Right after first editor

      // Expand first editor with wrapped content
      firstEditor.setText("This is a very long line that will wrap to multiple lines and push the second textarea down")
      await renderOnce()

      // First editor should now be taller
      expect(firstEditor.height).toBeGreaterThan(1)
      // Second editor should have moved down
      expect(secondEditor.y).toBeGreaterThan(initialSecondY)
      const expandedSecondY = secondEditor.y

      // Shrink first editor back
      firstEditor.setText("Short again")
      await renderOnce()

      // First editor should be 1 line again
      expect(firstEditor.height).toBe(1)
      // Second editor should have moved back up
      expect(secondEditor.y).toBeLessThan(expandedSecondY)
      expect(secondEditor.y).toBe(initialSecondY)
    })
  })

  describe("Width/Height Setter Layout Tests", () => {
    it("should not shrink box when width is set via setter", async () => {
      resize(40, 10)

      const container = new BoxRenderable(currentRenderer, { border: true, width: 30 })
      currentRenderer.root.add(container)

      const row = new BoxRenderable(currentRenderer, { flexDirection: "row", width: "100%" })
      container.add(row)

      const indicator = new BoxRenderable(currentRenderer, { backgroundColor: "#f00" })
      row.add(indicator)

      const indicatorText = new TextRenderable(currentRenderer, { content: ">" })
      indicator.add(indicatorText)

      const content = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
      row.add(content)

      const contentText = new TextRenderable(currentRenderer, { content: "Content that takes up space" })
      content.add(contentText)

      await renderOnce()

      const initialIndicatorWidth = indicator.width

      indicator.width = 5
      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()

      expect(indicator.width).toBe(5)
      expect(content.width).toBeGreaterThan(0)
      expect(content.width).toBeLessThan(30)
    })

    it("should not shrink box when height is set via setter in column layout with textarea", async () => {
      resize(30, 15)

      const outerBox = new BoxRenderable(currentRenderer, { border: true, width: 25, height: 10 })
      currentRenderer.root.add(outerBox)

      const column = new BoxRenderable(currentRenderer, { flexDirection: "column", height: "100%" })
      outerBox.add(column)

      const header = new BoxRenderable(currentRenderer, { backgroundColor: "#f00" })
      column.add(header)

      const headerText = new TextRenderable(currentRenderer, { content: "Header" })
      header.add(headerText)

      const mainContent = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
      column.add(mainContent)

      const { textarea: mainTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line1\nLine2\nLine3\nLine4\nLine5\nLine6\nLine7\nLine8",
      })
      mainContent.add(mainTextarea)

      const footer = new BoxRenderable(currentRenderer, { height: 2, backgroundColor: "#00f" })
      column.add(footer)

      const footerText = new TextRenderable(currentRenderer, { content: "Footer" })
      footer.add(footerText)

      await renderOnce()

      header.height = 3
      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()

      expect(header.height).toBe(3)
      expect(mainContent.height).toBeGreaterThan(0)
      expect(footer.height).toBe(2)
    })

    it("should not shrink box when minWidth is set via setter", async () => {
      resize(40, 10)

      const container = new BoxRenderable(currentRenderer, { border: true, width: 30 })
      currentRenderer.root.add(container)

      const row = new BoxRenderable(currentRenderer, { flexDirection: "row", width: "100%" })
      container.add(row)

      const indicator = new BoxRenderable(currentRenderer, { backgroundColor: "#f00", flexShrink: 1 })
      row.add(indicator)

      const indicatorText = new TextRenderable(currentRenderer, { content: ">" })
      indicator.add(indicatorText)

      const content = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
      row.add(content)

      const contentText = new TextRenderable(currentRenderer, { content: "Content that takes up space" })
      content.add(contentText)

      await renderOnce()

      indicator.minWidth = 5
      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()
      expect(indicator.width).toBeGreaterThanOrEqual(5)
      expect(content.width).toBeGreaterThan(0)
    })

    it("should not shrink box when minHeight is set via setter in column layout with textarea", async () => {
      resize(30, 15)

      const outerBox = new BoxRenderable(currentRenderer, { border: true, width: 25, height: 10 })
      currentRenderer.root.add(outerBox)

      const column = new BoxRenderable(currentRenderer, { flexDirection: "column", height: "100%" })
      outerBox.add(column)

      const header = new BoxRenderable(currentRenderer, { backgroundColor: "#f00", flexShrink: 1 })
      column.add(header)

      const headerText = new TextRenderable(currentRenderer, { content: "Header" })
      header.add(headerText)

      const mainContent = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
      column.add(mainContent)

      const { textarea: mainTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Line1\nLine2\nLine3\nLine4\nLine5\nLine6\nLine7\nLine8",
      })
      mainContent.add(mainTextarea)

      const footer = new BoxRenderable(currentRenderer, { height: 2, backgroundColor: "#00f" })
      column.add(footer)

      const footerText = new TextRenderable(currentRenderer, { content: "Footer" })
      footer.add(footerText)

      await renderOnce()

      header.minHeight = 3
      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()

      expect(header.height).toBeGreaterThanOrEqual(3)
      expect(mainContent.height).toBeGreaterThan(0)
      expect(footer.height).toBe(2)
    })

    it("should not shrink box when width is set from undefined via setter", async () => {
      resize(40, 10)

      const container = new BoxRenderable(currentRenderer, { border: true, width: 30 })
      currentRenderer.root.add(container)

      const row = new BoxRenderable(currentRenderer, { flexDirection: "row", width: "100%" })
      container.add(row)

      const indicator = new BoxRenderable(currentRenderer, { backgroundColor: "#f00", flexShrink: 1 })
      row.add(indicator)

      const indicatorText = new TextRenderable(currentRenderer, { content: ">" })
      indicator.add(indicatorText)

      const content = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
      row.add(content)

      const contentText = new TextRenderable(currentRenderer, { content: "Content that takes up space" })
      content.add(contentText)

      await renderOnce()

      indicator.width = 5
      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()

      expect(indicator.width).toBe(5)
      expect(content.width).toBeGreaterThan(0)
    })

    it("should verify dimensions are actually respected under extreme pressure", async () => {
      resize(30, 10)

      const container = new BoxRenderable(currentRenderer, { border: true, width: 20 })
      currentRenderer.root.add(container)

      const row = new BoxRenderable(currentRenderer, { flexDirection: "row", width: "100%" })
      container.add(row)

      const box1 = new BoxRenderable(currentRenderer, { backgroundColor: "#f00", flexShrink: 1 })
      row.add(box1)
      const text1 = new TextRenderable(currentRenderer, { content: "AAA" })
      box1.add(text1)

      const box2 = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexShrink: 1 })
      row.add(box2)
      const text2 = new TextRenderable(currentRenderer, { content: "BBB" })
      box2.add(text2)

      const box3 = new BoxRenderable(currentRenderer, { backgroundColor: "#00f", flexGrow: 1 })
      row.add(box3)
      const text3 = new TextRenderable(currentRenderer, { content: "CCC" })
      box3.add(text3)

      await renderOnce()

      box1.width = 7
      box2.minWidth = 5
      await renderOnce()

      expect(box1.width).toBe(7)
      expect(box2.width).toBeGreaterThanOrEqual(5)
      expect(box3.width).toBeGreaterThan(0)

      const total = box1.width + box2.width + box3.width
      expect(total).toBeLessThanOrEqual(18)
    })
  })

  describe("Absolute Positioned Box with Textarea", () => {
    it("should render textarea in absolute positioned box with padding and borders correctly", async () => {
      resize(80, 20)

      const notificationBox = new BoxRenderable(currentRenderer, {
        position: "absolute",
        justifyContent: "center",
        alignItems: "flex-start",
        top: 2,
        right: 2,
        maxWidth: Math.min(60, 80 - 6),
        paddingLeft: 2,
        paddingRight: 2,
        paddingTop: 1,
        paddingBottom: 1,
        backgroundColor: "#1e293b",
        borderColor: "#3b82f6",
        border: ["left", "right"],
      })

      currentRenderer.root.add(notificationBox)

      const outerWrapperBox = new BoxRenderable(currentRenderer, {
        flexDirection: "row",
        paddingBottom: 1,
        paddingTop: 1,
        paddingLeft: 2,
        paddingRight: 2,
        gap: 2,
      })
      notificationBox.add(outerWrapperBox)

      const innerContentBox = new BoxRenderable(currentRenderer, {
        flexGrow: 1,
        gap: 1,
      })
      outerWrapperBox.add(innerContentBox)

      const titleText = new TextRenderable(currentRenderer, {
        content: "Important Notification",
        attributes: 1,
        marginBottom: 1,
        fg: "#f8fafc",
      })
      innerContentBox.add(titleText)

      const { textarea: messageTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue:
          "This is a longer message that should wrap properly within the absolutely positioned box with appropriate width constraints and padding applied.",
        textColor: "#e2e8f0",
        wrapMode: "word",
        width: "100%",
      })
      innerContentBox.add(messageTextarea)

      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()

      expect(notificationBox.x).toBeGreaterThan(0)
      expect(notificationBox.y).toBe(2)
      expect(notificationBox.width).toBeGreaterThan(25)

      expect(outerWrapperBox.width).toBeGreaterThan(15)
      expect(innerContentBox.width).toBeGreaterThan(15)

      expect(titleText.width).toBeGreaterThan(15)
      expect(titleText.plainText).toBe("Important Notification")
      expect(titleText.height).toBe(1)

      expect(messageTextarea.width).toBeGreaterThan(15)
      expect(messageTextarea.height).toBeGreaterThanOrEqual(1)
      expect(messageTextarea.plainText).toBe(
        "This is a longer message that should wrap properly within the absolutely positioned box with appropriate width constraints and padding applied.",
      )
    })

    it("should render textarea fully visible in absolute positioned box at various positions", async () => {
      resize(100, 25)

      const topRightBox = new BoxRenderable(currentRenderer, {
        position: "absolute",
        top: 1,
        right: 1,
        maxWidth: 40,
        paddingLeft: 1,
        paddingRight: 1,
        paddingTop: 0,
        paddingBottom: 0,
        backgroundColor: "#fef2f2",
        borderColor: "#ef4444",
        border: true,
      })
      currentRenderer.root.add(topRightBox)

      const { textarea: topRightTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Error: File not found in the specified directory path",
        textColor: "#991b1b",
        wrapMode: "word",
        width: "100%",
      })
      topRightBox.add(topRightTextarea)

      const bottomLeftBox = new BoxRenderable(currentRenderer, {
        position: "absolute",
        bottom: 1,
        left: 1,
        maxWidth: 35,
        paddingLeft: 1,
        paddingRight: 1,
        backgroundColor: "#f0fdf4",
        borderColor: "#22c55e",
        border: ["top", "bottom"],
      })
      currentRenderer.root.add(bottomLeftBox)

      const { textarea: bottomLeftTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "Success: Operation completed successfully!",
        textColor: "#166534",
        wrapMode: "word",
        width: "100%",
      })
      bottomLeftBox.add(bottomLeftTextarea)

      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()

      expect(topRightBox.y).toBe(1)
      expect(topRightBox.x).toBeGreaterThan(50)
      expect(topRightBox.width).toBeGreaterThan(30)
      expect(topRightBox.width).toBeLessThanOrEqual(40)

      expect(topRightTextarea.plainText).toBe("Error: File not found in the specified directory path")
      expect(topRightTextarea.width).toBeGreaterThan(25)
      expect(topRightTextarea.width).toBeLessThanOrEqual(38)
      expect(topRightTextarea.height).toBeGreaterThan(1)

      expect(bottomLeftBox.x).toBe(1)
      expect(bottomLeftBox.y).toBeGreaterThan(15)
      expect(bottomLeftBox.width).toBeGreaterThan(25)
      expect(bottomLeftBox.width).toBeLessThanOrEqual(35)

      expect(bottomLeftTextarea.plainText).toBe("Success: Operation completed successfully!")
      expect(bottomLeftTextarea.width).toBeGreaterThan(25)
      expect(bottomLeftTextarea.width).toBeLessThanOrEqual(33)
      expect(bottomLeftTextarea.height).toBeGreaterThan(1)
    })

    it("should handle width:100% textarea in absolute positioned box with constrained maxWidth", async () => {
      resize(70, 15)

      const constrainedBox = new BoxRenderable(currentRenderer, {
        position: "absolute",
        top: 5,
        left: 10,
        maxWidth: 50,
        paddingLeft: 3,
        paddingRight: 3,
        paddingTop: 2,
        paddingBottom: 2,
        backgroundColor: "#1e1e2e",
      })
      currentRenderer.root.add(constrainedBox)

      const { textarea: longTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue:
          "This is an extremely long piece of text that needs to wrap multiple times within the constrained width of the absolutely positioned container box with significant padding on all sides.",
        textColor: "#cdd6f4",
        wrapMode: "word",
        width: "100%",
      })
      constrainedBox.add(longTextarea)

      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()

      expect(constrainedBox.width).toBeLessThanOrEqual(50)
      expect(constrainedBox.width).toBeGreaterThan(40)
      expect(constrainedBox.x).toBe(10)
      expect(constrainedBox.y).toBe(5)

      expect(longTextarea.width).toBeGreaterThan(35)
      expect(longTextarea.width).toBeLessThanOrEqual(44)
      expect(longTextarea.height).toBeGreaterThanOrEqual(5)
      expect(longTextarea.plainText).toBe(
        "This is an extremely long piece of text that needs to wrap multiple times within the constrained width of the absolutely positioned container box with significant padding on all sides.",
      )
    })

    it("should render multiple textarea elements in absolute positioned box with proper spacing", async () => {
      resize(90, 20)

      const infoBox = new BoxRenderable(currentRenderer, {
        position: "absolute",
        justifyContent: "flex-start",
        alignItems: "flex-start",
        top: 3,
        right: 5,
        maxWidth: 45,
        paddingLeft: 2,
        paddingRight: 2,
        paddingTop: 1,
        paddingBottom: 1,
        backgroundColor: "#eff6ff",
        borderColor: "#3b82f6",
        border: true,
      })
      currentRenderer.root.add(infoBox)

      const headerText = new TextRenderable(currentRenderer, {
        content: "System Update",
        attributes: 1,
        fg: "#1e40af",
      })
      infoBox.add(headerText)

      const { textarea: bodyTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
        initialValue: "A new version is available with bug fixes and performance improvements.",
        textColor: "#1e3a8a",
        wrapMode: "word",
        width: "100%",
        marginTop: 1,
      })
      infoBox.add(bodyTextarea)

      const footerText = new TextRenderable(currentRenderer, {
        content: "Click to install",
        fg: "#60a5fa",
        marginTop: 1,
      })
      infoBox.add(footerText)

      await renderOnce()

      const frame = captureFrame()
      expect(frame).toMatchSnapshot()

      expect(headerText.plainText).toBe("System Update")
      expect(bodyTextarea.plainText).toBe("A new version is available with bug fixes and performance improvements.")
      expect(footerText.plainText).toBe("Click to install")

      expect(infoBox.width).toBeGreaterThan(35)
      expect(infoBox.width).toBeLessThanOrEqual(45)

      expect(headerText.width).toBeGreaterThan(10)
      expect(headerText.height).toBe(1)

      expect(bodyTextarea.width).toBeGreaterThan(30)
      expect(bodyTextarea.height).toBeGreaterThanOrEqual(2)

      expect(footerText.width).toBeGreaterThan(10)
      expect(footerText.height).toBe(1)

      expect(bodyTextarea.y).toBeGreaterThan(headerText.y)
      expect(footerText.y).toBeGreaterThan(bodyTextarea.y)
    })
  })
})
